<template>
  <div class="radar-chart-container">
    <v-chart ref="radarChart" :option="chartOption" autoresize />
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { RadarChart } from 'echarts/charts'
import { 
  TitleComponent, 
  TooltipComponent, 
  LegendComponent 
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册必要的组件
use([
  CanvasRenderer,
  RadarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])


export default {
  name: 'RadarChart',
  components: {
    VChart
  },
  props: {
    chartData: {
      type: Object,
      required: true,
      default: () => ({
        labels: [],
        datasets: []
      })
    }
  },
  setup(props) {
    const radarChart = ref(null)
    
    // 将 Chart.js 数据格式转换为 ECharts 格式
    const chartOption = computed(() => {
      // 增强数据验证
      const labels = props.chartData?.labels || []
      const datasets = props.chartData?.datasets || []
      
      // 构建雷达图指示器
      const indicator = labels.map(label => ({
        name: label || '',
        max: 100
      }))
      
      // 构建系列数据，增加数据验证
      const series = datasets.map(dataset => ({
        type: 'radar',
        name: dataset?.label || '',
        data: [{
          value: dataset?.data || [],
          name: dataset?.label || ''
        }],
        areaStyle: {
          opacity: 0.3
        },
        lineStyle: {
          width: 2
        },
        itemStyle: {
          color: dataset?.borderColor || '#3B82F6'
        }
      }))
      
      return {
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            if (!params.data) return ''
            const data = params.data
            let result = (data.name || '') + '<br/>'
            if (Array.isArray(data.value)) {
              data.value.forEach((value, index) => {
                if (indicator[index]) {
                  result += indicator[index].name + ': ' + (value?.toFixed(1) || 0) + '%<br/>'
                }
              })
            }
            return result
          }
        },
        legend: {
          data: datasets.map(dataset => dataset?.label || ''),
          left: 'left',
          bottom: 'bottom',
          padding: [5, 10],
          textStyle: {
            fontSize: 12
          }
        },
        radar: {
          indicator: indicator,
          shape: 'circle',
          splitNumber: 5,
          axisName: {
            color: '#333',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.1)'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(255, 255, 255, 0.5)', 'rgba(240, 240, 240, 0.5)']
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.1)'
            }
          }
        },
        series: series
      }
    })
    
    return {
      radarChart,
      chartOption
    }
  }
}


</script>

<style scoped>
.radar-chart-container {
  position: relative;
  width: 100%;
  height: 100%;
}

:deep(.echarts) {
  width: 100% !important;
  height: 100% !important;
}
</style>